<template>
  <view class="container">
    <!-- 用户信息区域 -->
    <view class="user-header">
      <image
        class="user-bg"
        :src="userInfo.cardBg || '/static/profile-bg.jpg'"
        mode="aspectFill"
      ></image>

      <view class="header-overlay"></view>

      <view class="user-info-container">
        <!-- 左侧用户信息 -->
        <view class="user-info">
          <view class="user-avatar-container">
            <image
              class="avatar"
              :src="userInfo.userAvatarURL"
              mode="aspectFill"
            ></image>
            <view class="user-badge" v-if="userInfo.userOnlineFlag">
              <text class="badge-online">在线</text>
            </view>
            <view class="user-name">
              <text class="nickname">{{
                userInfo.userNickname || userInfo.userName || "加载中..."
              }}</text>
            </view>
            <text class="username">@{{ userInfo.userName || "..." }}</text>
          </view>
        </view>

        <!-- 右侧操作按钮 -->
        <view class="user-actions">
          <view
            class="action-button"
            :class="isFollowing ? 'followed-btn' : 'primary-btn'"
            @click="handleFollow"
          >
            <text>{{ isFollowing ? "已关注" : "关注" }}</text>
          </view>
          <view
            class="action-button secondary-btn"
            @click="handleMessage(userInfo.userName)"
          >
            <FeatherIcon
              name="message-square"
              size="18"
              color="#666"
            ></FeatherIcon>
          </view>
          <view class="action-button secondary-btn" @click="handleTransfer">
            <FeatherIcon
              name="dollar-sign"
              size="18"
              color="#666"
            ></FeatherIcon>
          </view>
        </view>
      </view>

      <!-- 用户标签信息 -->
      <view class="user-extra-container">
        <view class="user-extra" v-if="userInfo.userNo || userInfo.userRole">
          <text class="user-no" v-if="userInfo.userNo"
            >摸鱼派第 {{ userInfo.userNo }} 号成员</text
          >
          <text
            class="user-role"
            v-if="userInfo.userRole"
            @click="navigateToArticle(1630575841478)"
          >
            <rich-text :nodes="getRoleImage(userInfo.userRole)"></rich-text
          ></text>
        </view>
      </view>

      <!-- 用户额外信息 -->
      <view
        class="user-extra-info"
        v-if="userInfo.mbti || userInfo.userURL || userInfo.userCity"
      >
        <view
          class="extra-info-item"
          v-if="userInfo.mbti"
          @click="openMbtiLink(userInfo.mbti)"
        >
          <FeatherIcon name="user" size="16" color="#999"></FeatherIcon>
          <text> {{ userInfo.mbti }}</text>
        </view>
        <view class="extra-info-item" v-if="userInfo.userCity">
          <FeatherIcon name="map-pin" size="16" color="#999"></FeatherIcon>
          <text>{{ userInfo.userCity }}</text>
        </view>
        <view
          class="extra-info-item"
          v-if="userInfo.userURL"
          @click="openExternalLink(userInfo.userURL)"
        >
          <FeatherIcon
            name="external-link"
            size="16"
            color="#999"
          ></FeatherIcon>
          <text class="link-text">个人主页</text>
        </view>
      </view>

      <view class="user-intro-container" v-if="userInfo.userIntro">
        <view class="user-intro">
          <text>{{ userInfo.userIntro }}</text>
        </view>
      </view>
    </view>

    <!-- 数据统计卡片 -->
    <view class="data-card">
      <view class="user-stats">
        <view class="stat-item">
          <text class="stat-value">{{ userInfo.userPoint || 0 }}</text>
          <text class="stat-label">积分</text>
        </view>
        <view class="stat-divider"></view>
        <view class="stat-item">
          <text class="stat-value">{{ userInfo.followingUserCount || 0 }}</text>
          <text class="stat-label">关注</text>
        </view>
        <view class="stat-divider"></view>
        <view class="stat-item">
          <text class="stat-value">{{ userInfo.followerCount || 0 }}</text>
          <text class="stat-label">粉丝</text>
        </view>
        <view class="stat-divider"></view>
        <view class="stat-item">
          <text class="stat-value">{{ userInfo.onlineMinute }} </text>
          <text class="stat-label">总在线/分钟</text>
        </view>
      </view>
    </view>

    <!-- 用户勋章 -->
    <view class="medal-card" v-if="medals.length > 0">
      <view class="card-header">
        <view class="card-title">
          <FeatherIcon name="award" size="16" color="#f59e0b"></FeatherIcon>
          <text>勋章墙</text>
        </view>
        <view
          class="medals-toggle"
          v-if="medals.length > 5"
          @click="toggleExpand"
        >
          <text>{{ isExpanded ? "收起" : "展开" }}</text>
          <FeatherIcon
            :name="isExpanded ? 'chevron-up' : 'chevron-down'"
            size="16"
            color="#666"
          ></FeatherIcon>
        </view>
      </view>
      <view class="medals-list" :class="{ 'medals-expanded': isExpanded }">
        <view
          class="medal-item"
          v-for="(medal, index) in medals"
          :key="index"
          @click="showMedalDescription(medal)"
        >
          <img :src="medal.url" :title="medal.description" />
        </view>
      </view>
    </view>

    <!-- 内容标签页 -->
    <view class="content-card">
      <view class="tabs">
        <view
          :class="['tab-item', activeTab === 'articles' ? 'active' : '']"
          @click="changeTab('articles')"
        >
          <text class="tab-text">帖子</text>
          <text class="tab-count" v-if="articles.length > 0">{{
            articles.length
          }}</text>
        </view>
        <view
          :class="['tab-item', activeTab === 'breezemoons' ? 'active' : '']"
          @click="changeTab('breezemoons')"
        >
          <text class="tab-text">清风明月</text>
          <text class="tab-count" v-if="breezemoons.length > 0">{{
            breezemoons.length
          }}</text>
        </view>
      </view>

      <!-- 内容区域 -->
      <swiper
        class="content"
        :current="activeTab === 'articles' ? 0 : 1"
        @change="onSwiperChange"
      >
        <!-- 帖子列表 -->
        <swiper-item>
          <view class="content-list">
            <view class="loading-container" v-if="loading.articles">
              <view class="loading-spinner"></view>
              <text class="loading-text">加载中...</text>
            </view>
            <view class="empty" v-else-if="articles.length === 0">
              <FeatherIcon
                name="file-text"
                size="40"
                color="#ccc"
              ></FeatherIcon>
              <text>暂无帖子</text>
            </view>
            <view
              class="article-item"
              v-for="(article, index) in articles"
              :key="index"
              @click="navigateToArticle(article.oId)"
            >
              <text class="article-title">{{ article.articleTitle }}</text>
              <view class="article-meta">
                <text class="article-time">{{ article.timeAgo }}</text>
                <view class="article-stats">
                  <view class="meta-item">
                    <FeatherIcon
                      name="eye"
                      size="14"
                      color="#aaa"
                    ></FeatherIcon>
                    <text>{{ article.articleViewCount }}</text>
                  </view>
                  <view class="meta-item">
                    <FeatherIcon
                      name="message-circle"
                      size="14"
                      color="#aaa"
                    ></FeatherIcon>
                    <text>{{ article.articleCommentCount }}</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </swiper-item>

        <!-- 清风明月列表 -->
        <swiper-item>
          <view class="content-list">
            <view class="loading-container" v-if="loading.breezemoons">
              <view class="loading-spinner"></view>
              <text class="loading-text">加载中...</text>
            </view>
            <view class="empty" v-else-if="breezemoons.length === 0">
              <FeatherIcon name="wind" size="40" color="#ccc"></FeatherIcon>
              <text>暂无清风明月</text>
            </view>
            <view
              class="breezemoon-item"
              v-for="(breezemoon, index) in breezemoons"
              :key="index"
            >
              <view class="breezemoon-content">
                <rich-text :nodes="breezemoon.breezemoonContent"></rich-text>
              </view>
              <view class="breezemoon-meta">
                <view class="meta-item">
                  <FeatherIcon
                    name="clock"
                    size="14"
                    color="#aaa"
                  ></FeatherIcon>
                  <text>{{ breezemoon.timeAgo }}</text>
                </view>
                <view class="meta-item" v-if="breezemoon.breezemoonCity">
                  <FeatherIcon
                    name="map-pin"
                    size="14"
                    color="#aaa"
                  ></FeatherIcon>
                  <text>{{ breezemoon.breezemoonCity }}</text>
                </view>
              </view>
            </view>
          </view>
        </swiper-item>
      </swiper>
    </view>

    <!-- 转账弹窗 -->
    <view
      class="modal-overlay"
      v-if="showTransferPopup"
      @click.stop="closeTransferPopup"
    >
      <view class="transfer-popup" @click.stop>
        <view class="popup-header">
          <text class="popup-title">转账给 {{ userInfo.userName }}</text>
        </view>
        <view class="popup-content">
          <view class="popup-icon">
            <view class="icon-circle">
              <FeatherIcon
                name="dollar-sign"
                size="40"
                color="#ff9800"
              ></FeatherIcon>
            </view>
          </view>
          <view class="input-group">
            <text class="input-label">转账金额</text>
            <input
              type="number"
              class="transfer-input"
              v-model="transferAmount"
              placeholder="请输入积分数量"
            />
          </view>
          <view class="input-group">
            <text class="input-label">转账留言</text>
            <input
              type="text"
              class="transfer-input"
              v-model="transferMemo"
              placeholder="给Ta留言(选填)"
            />
          </view>
          <view class="transfer-warning">
            <FeatherIcon
              name="alert-triangle"
              size="16"
              color="#ff4d4f"
            ></FeatherIcon>
            <text class="warning-text"
              >注意：转账操作不可撤回，请慎重确认金额</text
            >
          </view>
        </view>
        <view class="popup-buttons">
          <button class="popup-button cancel" @click.stop="closeTransferPopup">
            取消
          </button>
          <button
            class="popup-button confirm"
            @click.stop="showTransferConfirm"
          >
            确认转账
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import api from "@/api";
import { isLoggedIn } from "@/api";
import FeatherIcon from "@/components/FeatherIcon.vue";
import { genMetal, getRoleImage } from "@/utils/common.js";

// 获取页面参数
const username = ref("");
const userInfo = ref({});
const isFollowing = ref(false);
const activeTab = ref("articles");
const articles = ref([]);
const breezemoons = ref([]);
const loading = reactive({
  user: true,
  articles: true,
  breezemoons: true,
});
const transferAmount = ref("");
const transferMemo = ref("");
const transferPopupRef = ref(null);
const transferConfirmShown = ref(false);
const showTransferPopup = ref(false); // 控制转账弹窗显示

// 处理页面参数
onLoad((option) => {
  if (option.username) {
    username.value = option.username;
    loadUserProfile();
  } else {
    uni.showToast({
      title: "未指定用户名",
      icon: "none",
    });
    setTimeout(() => {
      goBack();
    }, 1500);
  }
});

// 加载用户资料
const loadUserProfile = async () => {
  loading.user = true;
  try {
    uni.showLoading({ title: "加载中" });
    const res = await api.user.getProfile(username.value);
    if (res !== null) {
      userInfo.value = res;
      isFollowing.value = res.canFollow == "yes" ? false : true;
      // 加载其他数据
      loadUserArticles();
      loadUserBreezemoons();
    } else {
      uni.showToast({
        title: res.msg || "获取用户资料失败",
        icon: "none",
      });
    }
  } catch (error) {
    console.error("获取用户资料失败", error);
    uni.showToast({
      title: "获取用户资料失败，请稍后再试",
      icon: "none",
    });
  } finally {
    loading.user = false;
    uni.hideLoading();
  }
};

// 加载用户文章
const loadUserArticles = async () => {
  loading.articles = true;
  try {
    const res = await api.article.getUserArticles(username.value);
    if (res.code === 0) {
      articles.value = res.data.articles || [];
    } else {
      console.error("获取用户文章失败", res.msg);
    }
  } catch (error) {
    console.error("获取用户文章失败", error);
  } finally {
    loading.articles = false;
  }
};

// 加载用户清风明月
const loadUserBreezemoons = async () => {
  loading.breezemoons = true;
  try {
    const res = await api.breezemoons.getUserBreezemoons(username.value);
    if (res.code === 0) {
      breezemoons.value = res.data.breezemoons || [];
    } else {
      console.error("获取用户清风明月失败", res.msg);
    }
  } catch (error) {
    console.error("获取用户清风明月失败", error);
  } finally {
    loading.breezemoons = false;
  }
};

// 切换标签页
const changeTab = (tab) => {
  activeTab.value = tab;
};

// 关注用户
const handleFollow = async () => {
  if (!isLoggedIn()) {
    uni.navigateTo({
      url: "/pages/login/login",
    });
    return;
  }

  try {
    uni.showLoading({ title: isFollowing.value ? "取消关注中" : "关注中" });

    const followingId = userInfo.value.oId;
    let res;

    if (isFollowing.value) {
      res = await api.user.unfollowUser(followingId);
    } else {
      res = await api.user.followUser(followingId);
    }

    if (res.code === 0) {
      isFollowing.value = !isFollowing.value;
      uni.showToast({
        title: isFollowing.value ? "关注成功" : "已取消关注",
        icon: "success",
      });
    } else {
      uni.showToast({
        title: res.msg || "操作失败",
        icon: "none",
      });
    }
  } catch (error) {
    console.error("关注操作失败", error);
    uni.showToast({
      title: "操作失败，请稍后再试",
      icon: "none",
    });
  } finally {
    uni.hideLoading();
  }
};

// 跳转到私信页面
const handleMessage = (username) => {
  if (!isLoggedIn()) {
    uni.navigateTo({
      url: "/pages/login/login",
    });
    return;
  }
  uni.navigateTo({
    url: `/pages/chat/chat-detail?username=${username}`,
  });
};

// 显示转账弹窗
const handleTransfer = () => {
  if (!isLoggedIn()) {
    uni.navigateTo({
      url: "/pages/login/login",
    });
    return;
  }

  // 打开转账弹窗
  transferAmount.value = "";
  transferMemo.value = "";
  transferConfirmShown.value = false;
  showTransferPopup.value = true; // 显示弹窗
};

// 关闭转账弹窗
const closeTransferPopup = () => {
  showTransferPopup.value = false; // 隐藏弹窗
};

// 显示转账二次确认
const showTransferConfirm = () => {
  const amount = parseFloat(transferAmount.value);

  if (!amount || amount <= 0) {
    uni.showToast({
      title: "请输入有效的转账金额",
      icon: "none",
    });
    return;
  }

  uni.showModal({
    title: "转账确认",
    content: `确定要向${userInfo.value.userName}转账${amount}积分吗？\n注意：转账操作不可撤回！`,
    confirmColor: "#007AFF",
    success: (res) => {
      if (res.confirm) {
        confirmTransfer();
      }
    },
  });
};

// 确认转账
const confirmTransfer = async () => {
  const amount = parseFloat(transferAmount.value);

  try {
    uni.showLoading({ title: "转账中" });
    const res = await api.user.transfer(
      username.value,
      amount,
      transferMemo.value
    );

    if (res.code === 0) {
      uni.showToast({
        title: "转账成功",
        icon: "success",
      });
      closeTransferPopup();
    } else {
      uni.showToast({
        title: res.msg || "转账失败",
        icon: "none",
      });
    }
  } catch (error) {
    console.error("转账失败", error);
    uni.showToast({
      title: "转账失败，请稍后再试",
      icon: "none",
    });
  } finally {
    uni.hideLoading();
  }
};

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};

// 跳转到文章详情
const navigateToArticle = (articleId) => {
  uni.navigateTo({
    url: `/pages/article/detail?id=${articleId}`,
  });
};

// 格式化在线时长
const formatOnlineTime = (minutes) => {
  if (!minutes) return "0小时";

  const hours = Math.floor(minutes / 60);
  if (hours < 24) {
    return `${hours}小时`;
  } else {
    const days = Math.floor(hours / 24);
    return `${days}天`;
  }
};

// 格式化时间
const formatTime = (timestamp) => {
  if (!timestamp) return "";

  const date = new Date(timestamp);
  const now = new Date();
  const diff = Math.floor((now - date) / 1000);

  if (diff < 60) {
    return "刚刚";
  } else if (diff < 3600) {
    return `${Math.floor(diff / 60)}分钟前`;
  } else if (diff < 86400) {
    return `${Math.floor(diff / 3600)}小时前`;
  } else if (diff < 2592000) {
    return `${Math.floor(diff / 86400)}天前`;
  } else {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, "0");
    const day = String(date.getDate()).padStart(2, "0");
    return `${year}-${month}-${day}`;
  }
};

// 在 script setup 部分添加 onSwiperChange 方法
const onSwiperChange = (e) => {
  activeTab.value = e.detail.current === 0 ? "articles" : "breezemoons";
};

// 处理用户勋章数据
const medals = computed(() => {
  if (!userInfo.value || !userInfo.value.allMetalOwned) return [];

  try {
    const metalData = JSON.parse(userInfo.value.allMetalOwned);
    if (!metalData || !metalData.list || !Array.isArray(metalData.list))
      return [];
    console.log("metalData", metalData.list);
    return metalData.list
      .filter((medal) => medal.enabled)
      .map((medal) => ({
        name: medal.name,
        description: medal.description || "",
        url: genMetal(medal.name, medal.attr),
        attr: medal.attr,
      }));
  } catch (error) {
    console.error("解析勋章数据失败:", error);
    return [];
  }
});

// 勋章展开状态
const isExpanded = ref(false);

// 切换勋章展开/收起状态
const toggleExpand = () => {
  isExpanded.value = !isExpanded.value;
};

// 显示勋章描述
const showMedalDescription = (medal) => {
  uni.showModal({
    title: medal.name,
    content: medal.description || "暂无描述",
    showCancel: false,
    confirmText: "确定",
  });
};

// 打开外部链接
const openExternalLink = (url) => {
  if (!url) return;

  // 在H5环境中直接打开链接
  //#ifdef H5
  window.open(url, "_blank");
  //#endif

  // 在App环境中使用系统浏览器打开
  //#ifdef APP-PLUS
  plus.runtime.openURL(url);
  //#endif
};

// 打开MBTI链接
const openMbtiLink = (mbti) => {
  if (!mbti) return;

  // 提取MBTI前四个字母（如ENFP-T中的ENFP）
  const leftMbti = mbti.split("-")[0];
  const mbtiUrl =
    "https://www.16personalities.com/ch/" + leftMbti + "-%E4%BA%BA%E6%A0%BC";

  openExternalLink(mbtiUrl);
};
</script>

<style>
.container {
  background-color: #f7f8fa;
  padding: 0;
  box-sizing: border-box;
}

/* 用户头部区域 */
.user-header {
  position: relative;
  background-color: #fff;
  overflow: hidden;
  padding-bottom: 20rpx;
}
.user-extra-container {
  padding: 0 30rpx;
  margin-top: 10rpx;
}

.user-extra {
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow-x: auto;
  width: 100%;
  padding: 6rpx 0;
}

.user-extra::-webkit-scrollbar {
  display: none;
}

.user-no {
  font-size: 24rpx;
  color: #666;
  margin-right: 16rpx;
  background-color: #f5f5f5;
  padding: 4rpx 14rpx;
  border-radius: 12rpx;
  flex-shrink: 0;
}

.user-role {
  font-size: 24rpx;
  color: #fff;
  padding: 4rpx 14rpx;
  border-radius: 12rpx;
  flex-shrink: 0;
}
.user-bg {
  width: 100%;
  height: 340rpx;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}

.header-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 340rpx;

  z-index: 1;
}

.user-info-container {
  position: relative;
  display: flex;
  padding: 20rpx;
  z-index: 2;
  padding-top: 280rpx;
  justify-content: space-between;
}

.user-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.user-avatar-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 20rpx;
  position: relative;
}

.avatar {
  width: 140rpx;
  height: 140rpx;
  border-radius: 50%;
  border: 4rpx solid #fff;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
  margin-bottom: 12rpx;
}

.user-badge {
  position: absolute;
  bottom: 100rpx;
  right: 48%;
  transform: translateX(50%);
  z-index: 3;
}

.badge-online {
  font-size: 22rpx;
  color: #fff;
  background-color: #10b981;
  padding: 4rpx 16rpx;
  border-radius: 20rpx;
}

.user-name {
  margin-top: 10rpx;
  text-align: center;
}

.nickname {
  font-size: 34rpx;
  font-weight: bold;
  color: #333;
}

.username {
  font-size: 26rpx;
  color: #999;
  display: block;
  text-align: center;
  margin-top: 4rpx;
}

.user-actions {
  display: flex;
  align-items: flex-start;
  margin-top: 80rpx;
}

.action-button {
  min-width: 90rpx;
  height: 60rpx;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 12rpx;
  transition: all 0.3s ease;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.primary-btn {
  background-color: #ff9800;
  color: #fff;
  padding: 0 24rpx;
  border: 1rpx solid rgba(255, 255, 255, 0.2);
}

.primary-btn:active {
  background-color: #e08000;
  transform: scale(0.98);
}

.secondary-btn {
  background-color: #f5f5f5;
  color: #666;
  width: 60rpx;
  height: 60rpx;
  border-radius: 8rpx;
  border: 1rpx solid #eee;
}

.secondary-btn:active {
  background-color: #e8e8e8;
  transform: scale(0.98);
}

.user-intro-container {
  background-color: #fff;
  padding: 0 30rpx 0;
}

.user-intro {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
  margin-top: 10rpx;
}

/* 数据统计卡片 */
.data-card {
  background-color: #fff;
  margin-bottom: 20rpx;
  border-top: 1rpx solid #eee;
  border-bottom: 1rpx solid #eee;
}

.user-stats {
  display: flex;
  padding: 30rpx 10rpx;
}

.stat-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-divider {
  width: 1rpx;
  background-color: #eee;
  margin: 10rpx 0;
}

.stat-value {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 8rpx;
}

.stat-label {
  font-size: 24rpx;
  color: #999;
}

/* 用户勋章 */
.medal-card {
  background-color: #fff;
  margin-bottom: 20rpx;
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #eee;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}

.card-title {
  display: flex;
  align-items: center;
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
}

.card-title text {
  margin-left: 8rpx;
}

.medals-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  font-size: 24rpx;
  padding: 6rpx 16rpx;
  background-color: #f5f5f5;
  border-radius: 16rpx;
}

.medals-toggle text {
  margin-right: 8rpx;
}

.medals-list {
  display: flex;
  flex-wrap: wrap;
  max-height: 90rpx;
  overflow: hidden;
  transition: all 0.3s ease;
}

.medals-list.medals-expanded {
  max-height: 500rpx;
}

.medal-item {
  margin-right: 20rpx;
  margin-bottom: 20rpx;
  padding: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.medal-item:active {
  transform: scale(0.95);
}

/* 内容卡片 */
.content-card {
  background-color: #fff;
  margin-bottom: 20rpx;
}

.tabs {
  display: flex;
  border-bottom: 1rpx solid #f0f0f0;
}

.tab-item {
  flex: 1;
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.tab-text {
  font-size: 28rpx;
  color: #666;
  transition: all 0.2s ease;
}

.tab-count {
  font-size: 22rpx;
  color: #999;
  margin-left: 6rpx;
  background-color: #f5f5f5;
  padding: 0 8rpx;
  border-radius: 10rpx;
  min-width: 30rpx;
  text-align: center;
}

.tab-item.active .tab-text {
  color: #ff9800;
  font-weight: bold;
}

.tab-item.active .tab-count {
  background-color: rgba(255, 152, 0, 0.1);
  color: #ff9800;
}

.tab-item.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60rpx;
  height: 4rpx;
  background-color: #ff9800;
  border-radius: 2rpx;
}

.content {
  min-height: 400rpx;
  height: calc(100vh - 800rpx);
}

swiper {
  height: 100%;
}

swiper-item {
  height: 100%;
  overflow-y: auto;
}

.content-list {
  padding-bottom: 30rpx;
}

.loading-container {
  padding: 60rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.loading-spinner {
  width: 50rpx;
  height: 50rpx;
  border: 4rpx solid #eee;
  border-top-color: #ff9800;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16rpx;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.loading-text {
  font-size: 28rpx;
  color: #999;
}

.empty {
  padding: 80rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.empty text {
  font-size: 28rpx;
  color: #999;
  margin-top: 16rpx;
}

/* 文章列表项 */
.article-item {
  padding: 24rpx 30rpx;
  border-bottom: 1px solid #f5f5f5;
}

.article-title {
  font-size: 30rpx;
  color: #333;
  font-weight: 400;
  margin-bottom: 16rpx;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.article-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.article-time {
  font-size: 24rpx;
  color: #999;
}

.article-stats {
  display: flex;
}

.meta-item {
  display: flex;
  align-items: center;
  margin-left: 20rpx;
}

.meta-item text {
  font-size: 24rpx;
  color: #999;
  margin-left: 6rpx;
}

/* 清风明月列表项 */
.breezemoon-item {
  padding: 24rpx 30rpx;
  border-bottom: 1px solid #f5f5f5;
}

.breezemoon-content {
  font-size: 28rpx;
  color: #333;
  line-height: 1.6;
  margin-bottom: 16rpx;
}

.breezemoon-meta {
  display: flex;
  flex-wrap: wrap;
}

/* 转账弹窗 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6rpx);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.transfer-popup {
  width: 600rpx;
  background-color: #fff;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
}

.popup-header {
  padding: 30rpx;
  text-align: center;
  border-bottom: 1px solid #f5f5f5;
}

.popup-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.popup-content {
  padding: 30rpx;
}

.popup-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 30rpx;
}

.icon-circle {
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  background-color: rgba(255, 152, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.input-group {
  margin-bottom: 24rpx;
}

.input-label {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 10rpx;
  display: block;
}

.transfer-input {
  width: 100%;
  height: 90rpx;
  background-color: #f5f5f5;
  border-radius: 12rpx;
  padding: 0 24rpx;
  font-size: 28rpx;
  color: #333;
  box-sizing: border-box;
}

.transfer-warning {
  display: flex;
  align-items: center;
  margin-top: 20rpx;
  padding: 16rpx;
  background-color: #fff2f0;
  border-radius: 12rpx;
}

.warning-text {
  margin-left: 10rpx;
  font-size: 24rpx;
  color: #ff4d4f;
  line-height: 1.4;
}

.popup-buttons {
  display: flex;
  border-top: 1px solid #f5f5f5;
}

.popup-button {
  flex: 1;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  font-size: 30rpx;
  transition: all 0.2s ease;
}

.popup-button.cancel {
  color: #666;
  background-color: #fff;
}
.popup-button.confirm {
  color: #fff;
  background-color: #ff9800;
  font-weight: 500;
}
.popup-button::after {
  border: none;
}
.followed-btn {
  background-color: #f5f5f5;
  color: #666;
  padding: 0 24rpx;
  border: 1rpx solid #ddd;
}
.followed-btn:active {
  background-color: #e8e8e8;
  transform: scale(0.98);
}
/* 用户额外信息 */
.user-extra-info {
  padding: 10rpx 30rpx 0;
  display: flex;
  flex-wrap: wrap;
  background-color: #fff;
}
.extra-info-item {
  display: flex;
  align-items: center;
  margin-right: 30rpx;
  margin-bottom: 10rpx;
  font-size: 24rpx;
  color: #666;
  padding: 4rpx 10rpx;
  background-color: #f8f8f8;
  border-radius: 6rpx;
}
.extra-info-item text {
  margin-left: 8rpx;
}
.link-text {
  color: #3498db;
}
</style>
